<template>
    <div>
        <div>{{ num1 }}</div>
        <el-button @click="addEvent">moudleA</el-button>

        <div>{{ num2 }}</div>
        <el-button @click="add2Event">moudleB</el-button>

        <div>doubleNum: {{ doubleNum }}</div>

        <div></div>
        <el-button @click="dispatchEvent">dispatch</el-button>

        <div>sumWithRootCount:{{sumWithRootCount}}</div>

        <div>pageCount：{{ pageCount }}</div>
        <el-button @click="pageCountEvent">
            pageCount
        </el-button>

        <div>
            setupCount: {{ setupCount }}
        </div>
        <el-button @click="setupEvent">
            setupIncrement
        </el-button>

        <div>filterTodoList: {{ filterTodoList }}</div>

        <!--<div>oddRootSum: {{ oddRootSum }}</div>-->
        <el-button @click="oddRootSumEvent">
            oddRootSum
        </el-button>


        <div>filterMyPageList: {{ filterMyPageList }}</div>

        <div>someGetter: {{ someGetter }}</div>

        <div></div>
        <el-button @click="someActionEvent">
            someAction
        </el-button>

        <div>action1226: {{ action1226 }}</div>

        <div>全局的action：</div>
        <el-button @click="handlerActionEvent">
            handlerAction
        </el-button>

        <div>{{ setupA }}</div>
        <div>{{ setupB }}</div>

        <el-button @click="foo">
            foo
        </el-button>
        <el-button @click="bar">
            bar
        </el-button>
    </div>
</template>

<script>
    import { createNamespacedHelpers } from 'vuex';
    //import { mapState,mapActions } from 'vuex';

    const { mapState,mapActions } = createNamespacedHelpers('setup');

    import ElButton from "../../node_modules/element-ui/packages/button/src/button";
    export default {
        components: {
            ElButton

        },
        computed: {
            num1() {
                return this.$store.state.a.num;
            },
            num2() {
                return this.$store.state.b.num;
            },
            doubleNum() {
                return this.$store.getters.doubleNum;
            },
            sumWithRootCount() {
                return this.$store.getters.sumWithRootCount;
            },
            pageCount() {
                return this.$store.state.acount.myPage.pageCount;
            },
            //setup模块下的count
            setupCount() {
                return this.$store.state.setup.setupCount;
            },
            //得到setup模块中getters中处理之后的属性。
            filterTodoList() {
                //this.$store.getters['模块名／getters中的方法名']
                return this.$store.getters['setup/filterTodoList'];
            },
            //得到myPage模块中getters中处理之后的属性
            filterMyPageList() {
                return this.$store.getters['setup/filterMyPageList'];
            },
            //someGetter
            someGetter() {
                return this.$store.getters['setup/someGetter'];
            },
            action1226() {
                return this.$store.state.count1226;
            },

            //带命名空间的绑定函数
            //当使用mapState、mapGetters、mapActions和mapMutations这些函数来绑定命名空间的函数时，
            //可能写起来比较麻烦
//            ...mapState({
//                setupA: state=> state.setup.a,
//                setupB: state=> state.setup.b,
//            }),
            //简化
//            ...mapState('setup',{
//                setupA: state=> state.a,
//                setupB: state=> state.b,
//            })

            //再简化
            ...mapState({
                setupA: state=> state.a,
                setupB: state=> state.b,
            })
        },
        data() {
            return {};
        },
        created() {

        },
        mounted() {
            //console.log('111',this.$store.state.a);
        },
        methods: {
//            ...mapActions([
//                'setup/foo',
//                'setup/bar'
//            ]),

//            ...mapActions('setup',[
//                'foo',
//                'bar'
//            ]),

            ...mapActions([
                'foo',
                'bar'
            ]),
            addEvent() {
                this.$store.commit('incrementA');
            },
            add2Event() {
                this.$store.commit('incrementB');
            },
            dispatchEvent() {
                this.$store.dispatch('incrementA');
            },
            //提交嵌套的module
            pageCountEvent() {
                this.$store.commit('pageMutations');
            },
            //在设置模块中 提交一个mutations
            setupEvent() {
                //this.$store.commit('setup/mutations中的方法名');
                this.$store.commit('setup/increment');
            },
            //在设置模块中 触发一个action
            oddRootSumEvent() {
                this.$store.dispatch('setup/oddRootSum');
            },
            someActionEvent() {
                this.$store.dispatch('setup/someAction');
            },
            //全局的action
            handlerActionEvent() {
                this.$store.dispatch('handlerAction');
            },
        },
    }
</script>

<style lang='scss' scoped>

</style>